<template>
	<view class="page-box">
		<view class="jianbian">
			<!-- 搜索框 -->
			<view class="search-container">
				<Search v-model:modelValue="currentWord" v-model:searchCate="tabsIndex" @search="handleSearch"></Search>
			</view>

			<view v-if="home" style="height: 100%;">
				<!-- 历史记录 -->
				<view class="record-box" v-if="records.length > 0">
					<view class="record-header">
						<view class="record-title">{{ $t('historicalRecords') }}</view>
						<image src="/static/images/delete.png" class="clear-icon" @click="clearHistory"></image>
					</view>
					<view class="record-tag-box">
						<view class="record-keyword" v-for="(item, index) in records" :key="index"
							@click="searchWithKeyword(item.toString())">
							<view class="word-style">{{ item }}</view>
						</view>
					</view>
				</view>

				<!-- 热门系列 -->
				<view :class="{ 'hot-box-noHistory': records.length <= 0, 'hot-box': records.length > 0 }">
					<view class="hot-title">{{ $t('popularSeries') }}</view>
					<!-- 系列列表 -->
					<view class="hot-list">
						<!-- <up-list> -->
						<scroll-view scroll-y class="list-scroll">
							<view class="list-box">
								<view v-for="(item, index) in hotProducts" :key="index" class="product-style"
									@click="goListPage(item.productIdCode)">
									<view>
										<image :src="item.productImageSign" class="image-style"></image>
									</view>
									<view class="name-style">{{ item.productName }}</view>
								</view>
							</view>
						</scroll-view>
						<!-- </up-list> -->
					</view>
				</view>
			</view>

			<view v-else>
				<!-- tabs标签 -->
				<view class="tabs-container">
					<up-tabs :list="list" @click="shiftTab" :current="tabsIndex"
						:inactiveStyle="{ color: '#606266',fontSize:'14px', transform: 'scale(1)' }"
						:activeStyle="{ color: '#303133', fontWeight: 'bold',fontSize:'14px', transform: 'scale(1.05)' }"
						itemStyle="height: 2rem; width:100%;padding:0.3rem;" lineColor="#303133" lineWidth="70" />
				</view>
				<!--refresher-enabled -->
				<!-- <scroll-view scroll-y class="scroll-box"> -->
				<view v-show="tabsIndex === 0" v-if="haveResult == 1">
					<view class="hot-box1">
						<!-- 系列列表 -->
						<view class="hot-list1">
							<up-list @scrolltolower="loadMoreProducts" class="scroll-box" :pagingEnabled="true"
								:scrollTop="scrollToTop">
								<view class="list-box">
									<view v-for="(item,index) in products" :key="index" class="product-style"
										@click="goListPage(item.productIdCode)">
										<view>
											<image :src="item.productImageSign" class="image-style"></image>
										</view>
										<view class="name-style">{{item.productName}}</view>
									</view>
								</view>
								<view v-if="productLoading" style="display: flex;justify-content: center;">
									{{$t('loading')}}...
								</view>
								<view v-else-if="noMoreProduct" style="display: flex;justify-content: center;">
									{{$t('noMore')}}
								</view>
							</up-list>
						</view>
					</view>
				</view>
				<view v-show="tabsIndex === 0" v-else-if="haveResult == 0">
					<view class="not-result-box">
						<view class="content-box">
							<image src="/static/logo/dpl.png " class="logo-style"></image>
							<view class="text-style">{{$t('noProduct')}}</view>
						</view>
					</view>
				</view>
				<view v-show="tabsIndex === 1" v-if="haveResult2 == 1">
					<up-list @scrolltolower="loadMorePosts" class="scroll-box" :pagingEnabled="true">
						<view class="products-link">
							<!-- @update:post="updatePost(index, $event)"  -->
							<likeCard :post="post" v-for="(post, index) in posts" :key="index"
								@click="goDetailPage(post.funplay_code)"
								style="width:calc(50% - 0.5rem);margin: 0.25rem;" />
						</view>
						<view v-if="loading" style="display: flex;justify-content: center;">{{$t('loading')}}...</view>
						<view v-else-if="noMore" style="display: flex;justify-content: center;">{{$t('noMore')}}</view>
					</up-list>
				</view>
				<view v-show="tabsIndex === 1" v-else-if="haveResult2 == 0">
					<view class="not-result-box">
						<view class="content-box">
							<image src="/static/logo/dpl.png " class="logo-style"></image>
							<view class="text-style">{{$t('noPost')}}</view>
						</view>
					</view>
				</view>
				<view v-show="tabsIndex === 2" v-if="haveResult3 == 1">
					<up-list @scrolltolower="scrolltolower" class="scroll-user" :pagingEnabled="true">
						<up-list-item v-for="(item, index) in userList" :key="index">
							<up-cell :title="item.user_name" title-style="width:12rem;overflow: hidden;
								text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;
								-webkit-box-orient: vertical;">
								<template #icon>
									<div class="img" @tap="shiftUserHome(item)">
										<image :src="item.avatar_sign" alt="" />
									</div>
								</template>
								<template #right-icon>
									<!-- 关注 -->
									<span class="gzBtn" v-if="!item.if_follow">
										<up-button size="small" @tap.stop="handleButtonClick($event, item, index)"
											:loading="btnLoading" :loadingText="$t('attention')">
											{{ $t('attention') }}
										</up-button>
									</span>
									<!-- 已关注 -->
									<span class="ygzBtn" v-else>
										<up-button size="small" @tap.stop="handleButtonClick2($event, item, index)">
											{{ $t('havepaidattention') }}
										</up-button>
									</span>
								</template>
							</up-cell>
						</up-list-item>
						<view v-if="userLoading" style="display: flex;justify-content: center;">{{$t('loading')}}...
						</view>
						<view v-else-if="noMoreUser" style="display: flex;justify-content: center;margin-top: 0.3rem;">{{$t('noMore')}}
						</view>
					</up-list>
				</view>
				<view v-show="tabsIndex === 2" v-else-if="haveResult3 == 0">
					<view class="not-result-box">
						<view class="content-box">
							<image src="/static/logo/dpl.png " class="logo-style"></image>
							<view class="text-style">{{$t('noUser')}}</view>
						</view>
					</view>
				</view>
				<!-- </scroll-view> -->
			</view>
		</view>
	</view>

	<upModal :modalShow="modalShow" :modalTitle="''" :modalText1="modalText1" :isCancel="true" @cancel="cancel"
		@cloos="cloos" :showImage="true"></upModal>
</template>

<script setup lang="ts">
	import { ref, computed, onMounted, watchEffect, watch } from "vue";
	import { useI18n } from 'vue-i18n'
	import { useCommonStore } from '@/stores/useCommonStore';
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { SearchPost, SearchProduct, SearchUser } from '@/types/types'
	import { searchProduct, searchFunplay, hotProduct, searchAllUser } from '@/api/productList.js'
	import { attentionAndNot } from '@/api/index/index.js'
	import { followGZ } from '@/api/meApi/me.js'
	import likeCard from '@/components/linkCard.vue';
	import Search from '@/components/search.vue';
	import upModal from '../../components/upModal.vue';
	onShow(() => {
		console.log("123", haveResult.value, haveResult2.value, haveResult3.value)
		if (haveResult.value == -1 && haveResult2.value == -1 && haveResult3.value == -1) {
			getHotProduct()//热门系列
		}
		loadHistory()
	})
	onLoad((options : { page ?: string }) => {
		// 获取 URL 参数中的 page
		if (Object.prototype.hasOwnProperty.call(options, 'page')) {
			// pageSource.value = options.page || '' // 空值也赋值
			commonStore.setPageSource(options.page)
		}
	})

	const { t } = useI18n()
	const home = ref(true)
	const haveResult = ref<Number>(-1)
	const haveResult2 = ref<Number>(-1)
	const haveResult3 = ref<Number>(-1)
	const commonStore = useCommonStore();
	const tabsIndex = ref<number>(0) //Number(commonStore.tabsIndex)
	const currentWord = ref("")

	// 搜索结果数据
	const products = ref<SearchProduct[]>([])
	const posts = ref<SearchPost[]>([])
	const userList = ref<SearchUser[]>([])
	// 分页状态

	// 没有更多
	const noMore = ref(false);
	const loading = ref(false);
	const noMoreProduct = ref(false);
	const productLoading = ref(false);
	const noMoreUser = ref(false);
	const userLoading = ref(false);
	// 历史记录存储 key
	const HISTORY_KEY = 'search_history'
	// 最大历史记录数量
	const MAX_HISTORY_COUNT = 10

	// 初始化历史记录
	const records = ref<String[]>([])
	const btnLoading = ref(false)
	// 搜索参数
	const params = ref({
		current: 1,
		product_name: ''
	});
	const params3 = ref({
		current: 1,
		funpalytitle: ''
	});
	// 搜索用户的参数
	const page = ref(1)

	// 标签列表
	type tabListItemType = {
		name : string,
		badge ?: object
	}
	const list = ref<Array<tabListItemType>>([
		{ name: t('blindBoxSeries') },
		{ name: t('square') },
		{ name: t('user') },
	])
	// 滚动条位置
	const scrollToTop = ref(0)
	// 监听store中searchProductList的变化并同步到本地状态
	watch(() => commonStore.searchProductList, (newList) => {
		products.value = newList
		console.log('产品列表已更新', products.value)
		home.value = false //显示搜索结果页
		if (products.value.length !== 0) {
			tabsIndex.value = 0
			haveResult.value = 1
		} else {
			tabsIndex.value = 0
			haveResult.value = 0
		}
	},
		{ deep: true } // 深度监听数组内部变化
	)
	// 监听store中searchPostList的变化并同步到本地状态
	watch(() => commonStore.searchPostList, (newList) => {
		posts.value = newList
		console.log('帖子列表已更新', posts.value)
		home.value = false //显示搜索结果页
		if (posts.value.length !== 0) {
			tabsIndex.value = 1
			haveResult2.value = 1
		} else {
			tabsIndex.value = 1
			haveResult2.value = 0
		}
	},
		{ deep: true } // 深度监听数组内部变化
	)

	// 处理搜索事件
	function handleSearch(keyword : string, category : number) {
		currentWord.value = keyword;
		tabsIndex.value = category;
		commonStore.setKeyWord(keyword);
		// 页面来源
		if (commonStore.pageSource == 'square' && home.value == true) {
			params3.value.funpalytitle = keyword;
			getPostList(params3.value, true);
		} else if (commonStore.pageSource == 'list' && home.value == true) {
			params.value.product_name = keyword;
			getMenuList(params.value, true);
		}
		console.log("点击了", category, home.value)
		// 根据分类执行搜索
		if (category === 0 && home.value == false) {
			params.value.product_name = keyword;
			getMenuList(params.value, true);
			// 将数据存入 store
			// commonStore.setSearchProductList(products.value);
		} else if (category === 1 && home.value == false) {
			params3.value.funpalytitle = keyword;
			getPostList(params3.value, true);
		} else if (category === 2 && home.value == false) {
			// page.value = 1
			getUserList(keyword, true);  //搜索用户
		}

		addToHistory(keyword)
	}
	// 在父组件中添加处理方法
	// const updatePost = (index : number, updatedPost : SearchPost) => {
	// 	const newPosts = [...posts.value]
	// 	newPosts[index] = updatedPost
	// 	posts.value = newPosts
	// }
	// const currentWord = ref(commonStore.keyWord)

	// 热门系列
	const hotProducts = ref()
	async function getHotProduct() {
		try {
			const response = await hotProduct()
			if (response.code == 200 && response.msg == "success") {
				if (!response.data || response.data.length === 0) {
					uni.showToast({
						// 暂时没有推荐系列
						title: t('hotSeriesEmpty'),
						icon: "none",
					})
				} else {
					// 数据映射处理，确保productImageSign存在
					const DEFAULT_IMAGE = '/static/images/logo.png';
					hotProducts.value = response.data.map((item : any) => ({
						...item,
						productImageSign: item.productImageSign || DEFAULT_IMAGE, // 如果没有url，则添加默认值
					}));
				}
			} else {
				uni.showToast({
					//'获取热门系列失败'
					title: response.msg || t('hotSeriesFail'),
					icon: 'none'
				});
			}
		} catch (error) {
			// '加载失败:'
			let errorMsg = t('loadFail');
			// 尝试从错误对象中获取更具体的信息
			if (error.message) {
				errorMsg += error.message;
			} else if (typeof error === 'string') {
				errorMsg += error;
			}
			uni.showToast({
				title: `${errorMsg}`,
				icon: 'none', // 确保能显示完整错误信息
				duration: 1000 // 适当延长显示时间
			});
		}
	}

	// 从本地存储加载历史记录
	const loadHistory = () => {
		try {
			const savedHistory = uni.getStorageSync(HISTORY_KEY)
			if (savedHistory) {
				records.value = JSON.parse(savedHistory)
			}
		} catch (error) {
			console.error('加载历史记录失败:', error)
		}
	}
	//获取产品列表
	async function getMenuList(customParams : { current : number; product_name : string }, reset : Boolean) {
		// 加载中或没有更多数据时不执行
		if (productLoading.value || (reset ? false : noMoreProduct.value)) return;
		productLoading.value = true;

		if (reset) {
			customParams.current = 1;
			products.value = [];
			noMoreProduct.value = false; // 重置时允许加载更多
		} else {
			customParams.current++;
		}
		try {
			const response = await searchProduct(customParams)
			if (response.code == 200 && response.msg == "success") {
				if (!response.data || response.data.length === 0) {
					home.value = false
					if (customParams.current == 1) {
						haveResult.value = 0
					} else {
						haveResult.value = 1
						noMoreProduct.value = true;
					}
				} else {
					// 数据映射处理，确保productImageSign存在
					const DEFAULT_IMAGE = '/static/images/logo.png';
					products.value = reset
						? response.data.map((item : SearchProduct) => ({
							...item,
							productImageSign: item.productImageSign || DEFAULT_IMAGE
						}))
						: [...products.value, ...response.data.map((item : SearchProduct) => ({
							...item,
							productImageSign: item.productImageSign || DEFAULT_IMAGE
						}))];
					// products.value = reset ? response.data : [...products.value, ...response.data];
					haveResult.value = 1;
					tabsIndex.value = 0;
					// 将数据存入 store
					commonStore.setSearchProductList(products.value);
				}
			} else {
				if (customParams.current == 1) {
					haveResult.value = 0
				} else {
					haveResult.value = 1
					noMoreProduct.value = true;
				}
				// haveResult.value = 0;
				uni.showToast({
					// '搜索失败'
					title: response.msg || t('searchFail'),
					icon: 'none'
				});
			}
		} catch (error) {
			let errorMsg = t('loadFail');
			// 尝试从错误对象中获取更具体的信息
			if (error.message) {
				errorMsg += error.message;
			} else if (typeof error === 'string') {
				errorMsg += error;
			}
			uni.showToast({
				title: `${errorMsg}`,
				icon: 'none', // 确保能显示完整错误信息
				duration: 1000 // 适当延长显示时间
			});
		} finally {
			productLoading.value = false;
		}
	}
	// 加载更多产品
	function loadMoreProducts() {
		if (!productLoading.value && !noMoreProduct.value) {
			getMenuList(params.value, false);
		}
	}
	// 搜索帖子
	async function getPostList(customParams : { current : number; funpalytitle : string }, reset : Boolean) {
		// 加载中或没有更多数据时不执行
		if (loading.value || (reset ? false : noMore.value)) return;
		loading.value = true;

		if (reset) {
			customParams.current = 1;
			posts.value = [];
			noMore.value = false; // 重置时允许加载更多
		} else {
			customParams.current++;
		}

		console.log("请求参数", customParams);
		try {
			const response = await searchFunplay(customParams)
			if (response.code == 200 && response.msg == "success") {
				if (!response.data || response.data.length === 0) {
					home.value = false
					tabsIndex.value = 1;
					if (customParams.current == 1) {
						haveResult2.value = 0
					} else {
						haveResult2.value = 1
						noMore.value = true;
					}
				} else {
					posts.value = reset ? response.data : [...posts.value, ...response.data];
					haveResult2.value = 1;
					tabsIndex.value = 1;
					// 将数据存入 store
					commonStore.setSearchPostList(posts.value);
					if (customParams.current == 1) {
						scrollToTop.value = 0
					}
				}
			} else {
				// 报错也要跳到缺省页
				home.value = false
				tabsIndex.value = 1;
				if (customParams.current == 1) {
					haveResult2.value = 0
				} else {
					haveResult2.value = 1
					noMore.value = true;
				}
				uni.showToast({
					// '搜索失败'
					title: response.msg || t('searchFail'),
					icon: 'none'
				});
			}
		} catch (error) {
			let errorMsg = t('loadFail');
			// 尝试从错误对象中获取更具体的信息
			if (error.message) {
				errorMsg += error.message;
			} else if (typeof error === 'string') {
				errorMsg += error;
			}
			uni.showToast({
				title: `${errorMsg}`,
				icon: 'none', // 确保能显示完整错误信息
				duration: 2000 // 适当延长显示时间
			});
		} finally {
			loading.value = false;
		}
	}

	// 加载更多帖子
	function loadMorePosts() {
		if (!loading.value && !noMore.value) {
			getPostList(params3.value, false);
		}
	}

	// 搜索用户
	const getUserList = (keyWord : string, reset : Boolean) => {
		// 加载中或没有更多数据时不执行
		if (userLoading.value || (reset ? false : noMoreUser.value)) return;
		userLoading.value = true;

		if (reset) {
			page.value = 1;
			userList.value = [];
			noMoreUser.value = false; // 重置时允许加载更多
		} else {
			page.value++;
		}
		try {
			searchAllUser({ current: page.value, searchWord: keyWord }).then((res) => {
				if (res.code == 200) {
					if (!res.data || res.data.length === 0) {
						home.value = false
						tabsIndex.value = 2;
						if (page.value == 1) {
							haveResult3.value = 0
						} else {
							haveResult3.value = 1
							noMoreUser.value = true;
						}
					} else {
						userList.value = reset ? res.data : [...userList.value, ...res.data];
						haveResult3.value = 1;
						tabsIndex.value = 2;
					}
					// if (page.value == 1) {
					// 	userList.value = res.data
					// } else {
					// 	userList.value.push(...res.data)
					// }

					// if (res.data && res.data.length > 0) {
					// 	haveResult3.value = 1
					// } else {
					// 	haveResult3.value = 0
					// }
				} else {
					if (page.value == 1) {
						haveResult3.value = 0
					} else {
						haveResult3.value = 1
						noMoreUser.value = true;
					}
					uni.showToast({
						title: `${res.msg}`,
						icon: 'none',
						duration: 2000
					})
				}
			}).catch((err) => {
				uni.showToast({
					title: `${err.msg}`,
					icon: 'none',
					duration: 2000
				})
			})
		} catch (error) {
			let errorMsg = t('loadFail');
			// 尝试从错误对象中获取更具体的信息
			if (error.message) {
				errorMsg += error.message;
			} else if (typeof error === 'string') {
				errorMsg += error;
			}
			uni.showToast({
				title: `${errorMsg}`,
				icon: 'none', // 确保能显示完整错误信息
				duration: 2000 // 适当延长显示时间
			});
		} finally {
			userLoading.value = false;
		}
	}

	// 列表点击跳转到用户主页
	const shiftUserHome = (item : any) => {
		uni.navigateTo({
			url: '/pages/me/userHomepage?' + 'data=' + item.user_code,
		})
	}

	// 下拉触底事件
	const scrolltolower = () => {
		console.log("关键字：", currentWord.value)
		if (!userLoading.value && !noMoreUser.value) {
			getUserList(currentWord.value, false);  //搜索用户
		}
	};

	// 关注
	const handleButtonClick = (event : any, item : any, index : number) => {
		// event.stopPropagation(); // 阻止事件冒泡
		let ifGZData = !item.if_follow
		let para = {
			followUserCode: item.user_code,
			isFollow: ifGZData
		}
		btnLoading.value = true
		attentionAndNot(para).then((res) => {
			if (res.code == 200) {
				uni.showToast({
					title: t('Focusonsuccess'),
					icon: 'none',
					duration: 2000
				})
				item.if_follow = true
			} else {
				uni.showToast({
					title: `${res.msg}`,
					icon: 'error',
					duration: 2000
				})
				item.if_follow = false
			}
		}).finally(() => {
			btnLoading.value = false
		})
	}
	let itemData = ref<SearchUser>()
	const modalShow = ref(false)
	const modalText1 = ref('')
	// 取消关注
	const handleButtonClick2 = (event : any, item : any, index : number) => {
		event.stopPropagation(); // 阻止事件冒泡
		itemData.value = item
		if (item.if_follow) {
			modalText1.value = t('Doyouwanttocancelattention')
			modalShow.value = true
		}
	}
	// 取消关注弹窗
	const cancel = () => {
		modalShow.value = false
	}
	// 弹窗确认按钮
	const cloos = () => {// 确认后，取消关注
		let para = {
			followUserCode: itemData.value.user_code,
			isFollow: false
		}
		attentionAndNot(para).then((res) => {
			if (res.code == 200) {
				// uni.showToast({
				//     title: `取消关注成功!`,
				//     icon: 'success',
				//     duration: 2000
				// })
				itemData.value.if_follow = false
			} else {
				uni.showToast({
					title: `${res.msg}`,
					icon: 'error',
					duration: 2000
				})
				itemData.value.if_follow = true
			}
			modalShow.value = false
		})
	}

	// 添加搜索关键词到历史记录
	const addToHistory = (keyword : string) => {
		if (!keyword.trim()) return // 空关键词不添加
		// 移除已存在的相同关键词(避免重复)
		let newHistory = records.value.filter(item => item !== keyword)
		// 添加到开头(最新使用)
		newHistory.unshift(keyword)
		// 限制数量
		if (newHistory.length > MAX_HISTORY_COUNT) {
			newHistory = newHistory.slice(0, MAX_HISTORY_COUNT)
		}
		// 更新历史记录
		records.value = newHistory
		// 保存到本地存储
		saveHistory()
	}
	// 保存历史记录到本地存储
	const saveHistory = () => {
		try {
			uni.setStorageSync(HISTORY_KEY, JSON.stringify(records.value))
		} catch (error) {
			console.error('保存历史记录失败:', error)
		}
	}
	function searchWithKeyword(keyword : string) {
		currentWord.value = keyword
		// 添加到历史记录 (可选)
		addToHistory(keyword);
	}
	// 清除前确认框
	const isShowClear = ref(false)
	// 清除历史记录
	function clearHistory() {
		isShowClear.value = true
		uni.showModal({
			content: t('clearRecordTip'),
			confirmText: t('confirm'),    // 从语言包获取确认按钮文本
			cancelText: t('cancel'),      // 从语言包获取取消按钮文本
			success: (res) => {
				if (res.confirm) {
					records.value = [];
					try {
						uni.removeStorageSync(HISTORY_KEY)
					} catch (error) {
						console.error('清除历史记录失败:', error)
					}
				}
				isShowClear.value = false
			},
		});
	}

	function goListPage(id : string) {
		commonStore.select(id)
		commonStore.setProductIdCode(id)
		// switchTab无法带id  navigateTo 
		uni.switchTab({
			url: `/pages/list/list?id=${id}`
		})
		// uni.navigateTo({
		// 	url: `/pages/list/listSearch?id=${id}`
		// })
	}

	// 定义方法 切换tab时，也触发搜索
	function shiftTab(item : any) {
		tabsIndex.value = item.index
		commonStore.setTabsIndex(item.index);
		userList.value = []
		// 请求数据
		if (item.index == "0") {
			console.log("搜索盲盒", params.value)
			params.value.product_name = currentWord.value
			// params.value.current = 1
			getMenuList(params.value, true);
			haveResult2.value = -1
			haveResult3.value = -1
		}
		else if (item.index == "1") {
			// 搜索广场
			console.log("搜索广场", params3.value)
			params3.value.funpalytitle = currentWord.value
			// params3.value.current = 1
			getPostList(params3.value, true)
			haveResult.value = -1
			haveResult3.value = -1
		}
		else if (item.index == "2") {
			// 搜索用户
			console.log("搜索用户", params3.value)
			// page.value = 1
			getUserList(currentWord.value, true);  //搜索用户
			haveResult.value = -1
			haveResult2.value = -1
		}
	}

	// 跳转到帖子详情页
	function goDetailPage(id : string) {
		uni.navigateTo({
			// url: `/pages/index/scrollChart?forget=${id}`
			url: `/pages/advertisements/articleDetails?data=${id}`
		})
	}
</script>

<style scoped lang="scss">
	.page-box {
		width: 100%;
		height: 100%;
		/*微信小程序无法使用本地资源图片作为背景图 使用base64格式*/
		background-image: url('');
		background-size: cover;
		background-repeat: no-repeat;
	}

	.jianbian {
		width: 100%;
		height: 100%;
		box-sizing: border-box;
		padding: 1.5rem 0 0;
		/* #ifdef  MP-WEIXIN*/
		padding-top: 3.5rem;
		/* #endif*/
		background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 38%, rgba(255, 255, 255, 1) 100%);
	}

	.search-container {
		flex-shrink: 0;
		/* 防止搜索框被压缩*/
		// display: flex;
	}

	.record-box {
		margin-top: 1rem;
		padding: 0 1rem;
	}

	.record-header {
		display: flex;
		justify-content: space-between;
	}

	.record-title {
		height: 1.1rem;
		line-height: 1.1rem;
		color: rgba(16, 16, 16, 1);
		font-size: 1rem;
	}

	.clear-icon {
		width: 1.1rem;
		height: 1.1rem;
	}

	.record-tag-box {
		margin-top: 0.8rem;
		display: flex;
		width: 100%;
		flex-wrap: wrap;
		max-height: calc(1.7rem * 2 + 0.5rem * 2);
		/* 两行高度 + 行间距（margin-bottom） */
		overflow: hidden;
	}

	.record-keyword {
		min-width: 2rem;
		width: calc(100% - 1.6rem)/5;
		height: 1.7rem;
		line-height: 1.7rem;
		border-radius: 0.25rem;
		background-color: rgba(206, 206, 206, 1);
		font-size: 0.88rem;
		text-align: center;
		border: 0.06rem solid rgba(187, 187, 187, 1);
		margin: 0 0 0.5rem 0.4rem;
		padding: 0 0.2rem;
	}

	.word-style {
		// max-width: 6rem;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.hot-box {
		height: calc(100% - 13.5rem);
		margin-top: 0.8rem;
		padding: 0 1rem;
	}

	.hot-box-noHistory {
		height: 85%;
		margin-top: 0.8rem;
		padding: 0 1rem;
	}

	.hot-title {
		height: 1.1rem;
		line-height: 1.1rem;
		color: rgba(16, 16, 16, 1);
		font-size: 1rem;
	}

	.hot-list {
		height: 100%;
		margin-top: 0.5rem;
	}

	.list-scroll {
		height: 100%;
	}

	.list-box {
		display: flex;
		flex-wrap: wrap;
		justify-content: start;
	}

	.product-style {
		width: calc((100% - 3rem) / 3);
		margin: 1.2rem 0.5rem;
		text-align: center;
	}

	.image-style {
		width: 4.38rem;
		height: 4.38rem;
		border-radius: 50%;
	}

	.name-style {
		height: 1.06rem;
		line-height: 1.06rem;
		color: rgba(16, 16, 16, 1);
		font-size: 0.75rem;
		text-align: center;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 1;
		-webkit-box-orient: vertical;
	}

	.tabs-container {
		width: 70%;
		margin-top: 1.5rem;
		margin-left: 1rem;
	}

	.scroll-box {
		position: absolute;
		top: 9rem;
		bottom: 0;
		width: 100%;
		padding-bottom: 1rem;
		box-sizing: border-box;
		height: calc(100vh - 10rem) !important;
		// height: auto;
		/* #ifdef MP-WEIXIN*/
		top: 9rem;
		/* #endif */
		// background-color: aquamarine;
	}

	.scroll-user {
		position: absolute;
		top: 9rem;
		bottom: 0;
		width: 100%;
		padding-bottom: 1rem;
		box-sizing: border-box;
		height: calc(100vh - 10rem) !important;
		// background-color: aquamarine;
	}

	.products-link {
		display: flex;
		flex-wrap: wrap;
		width: 96%;
		margin: 0.5rem auto;
	}

	.hot-box1 {
		height: calc(100% - 13.5rem);
		padding: 0rem;
	}

	.hot-list1 {
		height: 100%;
	}

	.not-result-box {
		width: 100%;
		height: 20rem;
		margin-top: 3rem;
		padding: 2rem;
		box-sizing: border-box;
	}

	.content-box {
		width: 100%;
		margin: 0 auto;
		text-align: center;
	}

	.logo-style {
		width: 7.56rem;
		height: 7.38rem;
	}

	.text-style {
		height: 1.25rem;
		line-height: 1.25rem;
		font-size: 0.88rem;
		text-align: center;
	}


	.gzBtn {
		.u-button {
			width: 4.5rem;
			background-color: #de868f;
		}
	}

	.ygzBtn {
		.u-button {
			width: 4.5rem;
			white-space: nowrap;
			/* justify-content: flex-start; */ /*取消按钮居中 */
			overflow: hidden;
			text-overflow: ellipsis;
		}
	}

	.img {
		width: 80rpx;
		height: 80rpx;

		image {
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
	}
</style>